<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <div class="work-order-stats">
        <el-card class="box-card">
          <div class="b_header">
            <h2>出入统计</h2>
            <span>统计时间：2024.07.10 </span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item, index) in stats" :key="index">
              <el-card>
                <div class="stat-item">
                  <span>{{ item.label }}</span>
                  <strong>{{ item.value }}</strong>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="work-order-stats">
        <el-card class="box-card">
          <div class="b_header">
            <h2>人员类型统计</h2>
            <span>统计时间：2024.06.10-至今 </span>
          </div>
          <el-row :gutter="20">
            <el-col
              :span="12"
              v-for="(item, index) in personStats"
              :key="index"
            >
              <el-card>
                <div class="stat-item">
                  <span>{{ item.label }}</span>
                  <strong>{{ item.value }}</strong>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <div id="inCharts" style="width: 600px; height: 400px"></div>
      </el-col>

      <el-col :sm="24" :lg="12">
        <div id="rightCharts" style="width: 600px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from "vue";
import { getList } from "@/api/assessLog/assessLog";

const peopleIn = ref(0);
const peopleOut = ref(0);

const forPerson = ref(0);
const innerPerson = ref(0);

onMounted(() => {
  getList().then((res) => {
    peopleOut.value = res.data[0];
    peopleIn.value = res.data[1];
    innerPerson.value = res.data[2];
    forPerson.value = res.data[3];
  });
});

const stats = ref([
  { label: "外出", value: peopleOut },
  { label: "进入", value: peopleIn },
]);
const personStats = ref([
  { label: "外来人员", value: forPerson },
  { label: "小区用户", value: innerPerson },
]);
const version = ref("3.8.7");

function goTarget(url) {
  window.open(url, "__blank");
}
</script>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      personIn: 0,
      personOut: 0,
      forPeople: 0,
      innerPeople: 0,
    };
  },
  mounted() {
    getList().then((res) => {
      this.personOut = res.data[0];
      this.personIn = res.data[1];
      this.innerPeople = res.data[2];
      this.forPeople = res.data[3];
      this.initECharts();
      this.initREcharts();
    });
  },
  methods: {
    initECharts: function () {
      let charDom = document.getElementById("inCharts");
      let myChart = echarts.init(charDom);
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.personIn, name: "进入" },
              { value: this.personOut, name: "外出" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    initREcharts: function () {
      let charDom = document.getElementById("rightCharts");
      let myChart = echarts.init(charDom);
      let option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "70%"],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data: [
              { value: this.forPeople, name: "外来人员" },
              { value: this.innerPeople, name: "小区人员" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.inCharts {
  width: 600px;
  height: 400px;
  background-color: #9f2d2d;
}
.home {
  .work-order-stats {
    margin: 30px;
    text-align: center;
  }

  .box-card {
    width: 100%;
  }

  .b_header {
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
  }

  .stat-item span {
    color: #948f8f;
  }

  .stat-item strong {
    font-size: 40px;
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }
}
</style>

